<template>
    <el-card class="profile-form-card" shadow="never">
        <!-- 蓝色标题栏 -->
        <div class="form-title-bar">
            <span>修改会员资料</span>
            <el-button type="primary" plain size="small" @click="goBack">返回</el-button>
        </div>

        <!-- 表单内容 -->
        <el-form ref="profileFormRef" :model="profileDataForm" :rules="profileRules" label-position="right" label-width="100px"
            class="profile-form">
            <el-form-item label="登录用户名:">
                <!-- 直接显示用户名文本 -->
                <span>{{ profileDataForm.account }}</span>
            </el-form-item>

            <el-form-item label="登录密码:">
                <el-input type="password" v-model="profileDataForm.password" placeholder="不修改密码请留空！若修改请牢记新密码！" show-password
                    style="width: 250px;" />
                <!-- 提示文字已包含在 placeholder 中 -->
            </el-form-item>

            <el-form-item label="昵称:" prop="nickname">
                <el-input v-model="profileDataForm.nickname" style="width: 250px;" />
                <!-- 输入框旁的提示文字 -->
                <span class="field-hint">* 作为默认留言签名及建馆人署名</span>
            </el-form-item>

            <!-- 输入框下方的详细描述 -->
            <el-form-item label="邮件地址:" prop="email">
                <el-input v-model="profileDataForm.email" style="width: 250px;" />
                <span class="field-hint red-hint">* 重要，请填写正确的邮件地址！</span>
                <div class="field-description">
                    真实有效的会员资料，才能享受今生永恒网的全部服务，以及作为会员身份核实、密码找回等的重要依据！
                </div>
            </el-form-item>

            <el-form-item label="真实姓名:" prop="real_name">
                <el-input v-model="profileDataForm.real_name" style="width: 250px;" />
                <span class="field-hint">* 您的真实姓名</span>
            </el-form-item>

            <el-form-item label="证件号码:" prop="id_card">
                <el-input v-model="profileDataForm.id_card" style="width: 250px;" :disabled="userStore.userInfo.id_card != ''"/>
                <span class="field-hint">* 身份证号码等，作为会员身份核实时用，最后一位为X的请用0代替。</span>
            </el-form-item>

            <el-form-item label="性别:" prop="sex">
                <!-- 性别选择下拉框 -->
                <el-select v-model="profileDataForm.sex" placeholder="请选择" style="width: 100px;">
                    <el-option label="男" :value="1" />
                    <el-option label="女" :value="2" />
                    <el-option label="保密" :value="0" />
                    <!-- 如果需要，可添加其他选项 -->
                </el-select>
                <!-- 必填星号 -->
                <span class="required-star">*</span>
            </el-form-item>

            <el-form-item label="联系电话:" prop="mobile">
                <el-input v-model="profileDataForm.mobile" style="width: 250px;" />
                <span class="required-star">*</span>
            </el-form-item>

            <el-form-item label="邮政编码:" prop="post_code">
                <el-input v-model="profileDataForm.post_code" style="width: 250px;" />
                <span class="required-star">*</span>
            </el-form-item>

            <el-form-item label="通信地址:" prop="address">
                <el-input v-model="profileDataForm.address" style="width: 350px;" />
                <span class="required-star">*</span>
            </el-form-item>

            <!-- 提交按钮行，不需要标签 -->
            <el-form-item label-width="0">
                <div class="submit-button-container">
                    <el-button type="primary" @click="submitForm()">提交保存</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 如果需要表单实例类型用于 ref (例如进行验证)
import type { FormInstance, FormRules  } from 'element-plus';
import { userUpDate } from '@/api/user'
import useUserStore from '@/stores/modules/user'
import feedback from '@/utils/feedback';
const userStore = useUserStore()
// 定义表单数据的接口
interface ProfileData {
    account?: string;
    password?: string; // 密码是可选的，因为可能不修改
    nickname: string;
    email: string;
    real_name: string;
    id_card: string;
    sex: 1 | 2 | 0; // 性别，允许空字符串作为初始状态
    mobile: string;
    post_code: string;
    address: string;
}

// 表单实例的 ref (可选，主要用于调用表单验证方法)
const profileFormRef = ref<FormInstance>();

// 使用 ref 创建响应式的表单数据对象
const profileDataForm = ref<ProfileData>({
    password: '', // 初始化为空字符串
    nickname: '', // 再次假设是'阿伟'
    email: '',
    real_name: '', // 假设是'王伟'
    id_card: '',
    sex: 0, // 根据截图预先选择'男'
    mobile: '',
    post_code: '',
    address: '',
});
// 自定义身份证校验规则
const validateIdCard = (rule: any, value: any, callback: any) => {
  if (!value) {
    // 如果字段不是必填，且为空，则不校验
    // return callback() // 如果允许为空，则取消注释这行
    return callback(new Error('请输入身份证号码')) // 如果必填
  }
  // 18位身份证号码正则表达式
  // 更严格的校验（包括地区码、出生日期、校验位）会更复杂，这里是一个基础格式校验
  const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  // 简单版18位（数字+最后一位可以是X）
  // const reg = /^\d{17}(\d|X|x)$/
  if (!reg.test(value)) {
    callback(new Error('请输入有效的18位身份证号码'))
  } else {
    callback() // 校验通过
  }
}

// 自定义邮政编码校验规则
const validatePostCode = (rule: any, value: any, callback: any) => {
  if (!value) {
    // return callback() // 如果允许为空
    return callback(new Error('请输入邮政编码')) // 如果必填
  }
  // 中国邮政编码为6位数字
  const reg = /^[0-9]{6}$/
  if (!reg.test(value)) {
    callback(new Error('请输入有效的6位邮政编码'))
  } else {
    callback()
  }
}
const profileRules = reactive<FormRules<ProfileData>>({
    nickname: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    real_name: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' },
    ],
    id_card: [
        { required: true, message: '请输入证件号码', trigger: 'blur' },
        // { validator: validateIdCard, trigger: 'blur' },
        // 你也可以添加长度校验等
        // { min: 18, max: 18, message: '身份证号码长度应为18位', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
    ],
    post_code: [
        { required: true, message: '请输入邮政编码', trigger: 'blur' },
        { validator: validatePostCode, trigger: 'blur' },
        // { len: 6, message: '邮政编码长度应为6位', trigger: 'blur' }, // 或者用 len
    ],
    address: [
        { required: true, message: '请输入通信地址', trigger: 'blur' },
    ]
})


// 提交表单的方法
const submitForm = async () => {
    console.log('正在提交表单数据:', profileDataForm.value);
    // 如果需要，在此处添加表单验证逻辑，使用 profileFormRef.value.validate()
    // 验证示例 (如果使用了表单规则，取消注释并调整):
    /*
    if (!profileFormRef.value) return;
    try {
      await profileFormRef.value.validate();
      console.log('验证通过!');
      // 调用 API 保存数据
      alert('表单数据已提交 (模拟)');
    } catch (error) {
      console.log('验证失败:', error);
    }
    */
    // 目前仅作模拟提示
    // alert('表单数据已提交 (模拟)');
    if (!profileFormRef.value) return;
	try {
		// 触发所有表单项的验证
		await profileFormRef.value.validate();

		// 如果验证通过，执行提交逻辑
		console.log('表单验证通过，准备提交:', profileDataForm);

		// 在这里执行实际的注册 API 调用
		// const response = await api.register(registerForm);
		// ElMessage.success('注册成功！');
		// 重置表单
		// registerFormRef.value.resetFields();
        await userStore.userUpData(profileDataForm.value)
        feedback.msgSuccess('更新成功')
        userStore.getUserInfoFun()
        profileDataForm.value.password = ''
		// 跳转到首页
	} catch (error) {
		// 验证失败或提交失败
		console.error('表单验证失败或提交出错:', error);
		// ElMessage.error('注册失败，请检查填写的信息');
	}
};
const emit = defineEmits<{
    (e: 'back-to-list', from: string): void;
}>();
const goBack = () => {
    console.log('返回上一页...');
    // 实现返回逻辑, 比如使用 vue-router 的 router.back()
    // alert('返回上一页 (模拟)');
    emit('back-to-list', 'userInfoEdit')
};


const getUserInfo = () => {
    userStore.getUserInfoFun().then((res:any)=>{
        console.log(res)
        profileDataForm.value.account = res.account
        profileDataForm.value.nickname = res.nickname
        profileDataForm.value.email = res.email
        profileDataForm.value.real_name = res.real_name
        profileDataForm.value.id_card = res.id_card
        profileDataForm.value.mobile = res.mobile
        profileDataForm.value.post_code = res.post_code
        profileDataForm.value.address = res.address
        profileDataForm.value.sex = res.sex == '男' ? 1 : res.sex == '女' ? 2 : 0
    })
}

onMounted(()=>{
    getUserInfo()
})
</script>

<style scoped>
/* 表单卡片容器 */
.profile-form-card {
    border: 1px solid #DCDFE6;
    /* 外边框 */
    box-shadow: none;
    /* 移除阴影 */
    padding: 0;
    /* 移除卡片内边距，由内部元素控制 */
    background-color: #fff;
    /* 白色背景 */
}

/* 表单顶部的蓝色标题栏 */
.form-title-bar {
    background-color: #f0f5ff;
    /* 淡蓝色背景 */
    color: #409EFF;
    /* Element Plus 主题蓝文字 */
    padding: 8px 15px;
    /* 内边距 */
    font-size: 14px;
    /* 字体大小 */
    font-weight: bold;
    /* 字体加粗 */
    border-bottom: 1px solid #DCDFE6;
    /* 标题栏下边框 */
    border-top-left-radius: 3px;
    /* 可选：匹配卡片圆角 */
    border-top-right-radius: 3px;
    margin-bottom: 20px;
    /* 标题栏下方间距 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 表单主体内边距 */
.profile-form {
    padding: 0 20px 20px 20px;
}

/* 调整表单项的下边距 */
.el-form-item {
    margin-bottom: 18px;
    /* 行间垂直距离 */
}

/* 表单标签样式 */
:deep(.el-form-item__label) {
    color: #606266;
    /* 标签颜色 */
    font-size: 13px;
    /* 标签字体大小 */
    padding-right: 12px;
    /* Element Plus 标准右边距 */
    line-height: 32px;
    /* 与输入框高度对齐 */
}

/* 用于显示普通文本的 span 样式 (排除提示和星号) */
.el-form-item span:not(.field-hint):not(.required-star) {
    color: #606266;
    font-size: 13px;
    line-height: 32px;
    /* 与输入框高度对齐 */
}

/* 输入框和选择框内部样式调整 */
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
    /* background-color: #fdfdfd; */
    /* 如果需要，可设置轻微的背景色 */
    /* box-shadow: none; */
    /* 如果需要，移除默认焦点阴影 */
    /* border: 1px solid #e4e7ed; */
    /* 如果需要，覆盖边框样式 */
    font-size: 13px;
    /* 输入区域字体大小 */
}

/* 输入框占位符样式 */
:deep(.el-input__inner::placeholder) {
    font-size: 12px;
    /* 占位符字体稍小 */
    color: #a8abb2;
    /* 占位符颜色 */
}

/* 输入框旁边的提示文字 */
.field-hint {
    font-size: 12px;
    /* 提示文字大小 */
    color: #909399;
    /* 灰色提示文字 */
    margin-left: 10px;
    /* 与输入框的左间距 */
    line-height: 32px;
    /* 垂直对齐输入框 */
}

/* 红色重要提示 */
.red-hint {
    /* color: #f56c6c; */
    /* Element Plus 危险红色 */
}

/* 输入框下方的描述文字 */
.field-description {
    font-size: 12px;
    /* 描述文字大小 */
    color: #909399;
    /* 灰色描述文字 */
    line-height: 1.5;
    /* 行高 */
    margin-top: 4px;
    /* 与上方输入框的间距 */
    /* 将描述缩进到与输入框开始位置对齐 */
    padding-left: 0px;
    /* 如果标签宽度变化，可能需要调整 */
    width: calc(100% - 100px);
    /* 大致宽度，可能需要调整 */
}

/* 必填星号样式 */
.required-star {
    color: #f56c6c;
    /* 红色 */
    margin-left: 5px;
    /* 与前面元素的间距 */
    font-weight: bold;
    /* 星号稍粗 */
    line-height: 32px;
    /* 垂直对齐 */
}

/* 提交按钮容器，用于对齐 */
.submit-button-container {
    /* 可以使用 text-align: center; 或 margin: auto; */
    /* padding-left: 100px; /* 根据标签宽度调整左内边距 */
    /* 或者使用 Flexbox 进行更复杂的对齐 */
    margin-top: 10px;
    /* 按钮上方间距 */
    padding-left: 100px;
    /* 通过左内边距使其与输入框左侧对齐 (等于 label-width) */
}

/* 按钮字体大小 */
.el-button {
    font-size: 13px;
}

/* 确保特定输入的宽度优先级，如果需要覆盖全局样式 */
.el-input {
    font-size: 13px;
    /* 统一输入框字体 */
}
</style>